<template>
  <div class="equipSectionProcess" ref="equipSectionProcess"></div>
</template>

<script lang="ts">
export default {
  name: "equipSectionProcess"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref, reactive, watch } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
import { getEquipStageProcess } from "/@/api/dashboards";
import { storageLocal } from "/@/utils/storage";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { postProjectMngList } from "/@/api/project";

const equipSectionProcess = ref<HTMLElement | null>(null) as any;

const props = defineProps({
  sectionId: {
    type: String || Number,
    default: ""
  }
});

let echartInstance: ECharts;
let projectInfo = storageLocal.getItem("projectInfo");
let xAxisData = ref([]);
let seriesData = ref([]);
let getEquipStageProcessData = ref({});
let sectionId = ref("");

let formInline = reactive({
  projectNameLike: "",
  projectRegionCode: "",
  projectFactoryCode: "",
  projectLeaderNameLike: "",
  projectTypeCode: "",
  projectYear: "",
  createTimeStrStart: "",
  createTimeStrEnd: "",
  pageNum: 1,
  pageSize: 10
});

function initechartInstance(xAxis, data1, data2, data3) {
  const echartDom = document.querySelector(".equipSectionProcess");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    color: ["#85df00", "#ffd765", "#5298ff"],
    grid: {
      left: "12%",
      right: "1%",
      bottom: "3%",
      containLabel: true
    },
    yAxis: {
      type: "value"
    },
    xAxis: {
      type: "category",
      axisLabel: {
        interval: 0,
        rotate: 50,
        formatter: function (params) {
          var newParamsName = "";
          var paramsNameNumber = params.length;
          var provideNumber = 5; //一行显示多少个文字
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (var p = 0; p < rowNumber; p++) {
              var tempStr = "";
              var start = p * provideNumber;
              var end = start + provideNumber;
              if (p == rowNumber - 1) {
                tempStr = params.substring(start, paramsNameNumber);
              } else {
                tempStr = params.substring(start, end) + "\n";
              }
              newParamsName += tempStr;
            }
          } else {
            newParamsName = params;
          }
          return newParamsName;
        }
      },
      data: xAxis
    },
    legend: {
      top: 10,
      left: "right"
    },
    tooltip: {
      trigger: "item"
    },
    // series: seriesData
    series: [
      {
        name: "已完成",
        data: data1,
        type: "bar",
        stack: "total",
        barCategoryGap: "50%",
        barMaxWidth: 20
      },
      {
        name: "处理中",
        data: data2,
        type: "bar",
        stack: "total",
        barCategoryGap: "50%",
        barMaxWidth: 20
      },
      {
        name: "未启动",
        data: data3,
        type: "bar",
        stack: "total",
        barCategoryGap: "50%",
        barMaxWidth: 20
      }
    ]
  });
}

// const initProjectNum = async () => {
//   try {
//     const { code, data } = await postProjectMngList(formInline);
//     if (code === 200) {
//       console.log(11111, data);
//       // xAxisData.value = data.xAxisData;
//       // const dataKey = Object.keys(data.multiSeriesData);
//       // seriesData.value = dataKey.map(item => {
//       //   return {
//       //     name: item,
//       //     data: data.multiSeriesData[item],
//       //     type: "line",
//       //     label: {
//       //       show: true
//       //     }
//       //   };
//       // });
//       nextTick(() => {
//         initechartInstance(xAxisData.value, seriesData.value);
//       });
//     }
//   } catch (err) {
//     console.log(err);
//   }
// };
// initProjectNum();

//获得各阶段事项进度数据
const getEquipStageProcessInfo = async (sectionId?) => {
  try {
    const { data } = await getEquipStageProcess({
      projectManageId: projectInfo.id,
      sectionId: sectionId
    });
    getEquipStageProcessData.value = data;
    let xAxis = [],
      data1 = [],
      data2 = [],
      data3 = [];

    data.forEach(item => {
      xAxis.push(item.stageName);
      data1.push(item.noStartDoingComplete.taskCompleteTotal);
      data2.push(item.noStartDoingComplete.taskDoingTotal);
      data3.push(item.noStartDoingComplete.taskNoStartTotal);
    });

    nextTick(() => {
      initechartInstance(xAxis, data1, data2, data3);
    });
  } catch (err) {
    console.log(err);
  }
};
getEquipStageProcessInfo(sectionId.value);

onMounted(() => {
  nextTick(() => {
    addResizeListener(equipSectionProcess.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

watch(
  () => props.sectionId,
  newVal => {
    getEquipStageProcessInfo(newVal);
  }
);

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(equipSectionProcess.value, resetRender);
});
</script>

<style lang="scss" scoped>
.equipSectionProcess {
  width: 90%;
  height: 100%;
}
</style>
